মেনু নেভিগেশন: বিশ্বব্যাপী দর্শকদের জন্য অ্যাক্সেসযোগ্য ড্রপডাউন এবং মেগা মেনু তৈরি

ওয়েবসাইট নেভিগেশন ব্যবহারকারীর অভিজ্ঞতার মূল ভিত্তি। ভালোভাবে সাজানো মেনু দর্শকদের দ্রুত এবং দক্ষতার সাথে তাদের প্রয়োজনীয় তথ্য খুঁজে পেতে সাহায্য করে, যা ব্যবহারকারীর অংশগ্রহণ এবং রূপান্তর বাড়ায়। ড্রপডাউন এবং মেগা মেনু বিশাল কন্টেন্টযুক্ত ওয়েবসাইটের জন্য জনপ্রিয়, কিন্তু সতর্কতার সাথে প্রয়োগ না করা হলে এদের জটিলতা অ্যাক্সেসিবিলিটির ক্ষেত্রে চ্যালেঞ্জ তৈরি করতে পারে। এই নির্দেশিকাটি এমন অ্যাক্সেসযোগ্য ড্রপডাউন এবং মেগা মেনু তৈরির সেরা পদ্ধতিগুলি অন্বেষণ করে যা বিভিন্ন ক্ষমতা বা ডিভাইস নির্বিশেষে বিশ্বব্যাপী দর্শকদের জন্য উপযুক্ত।

অ্যাক্সেসযোগ্য নেভিগেশনের গুরুত্ব বোঝা

অ্যাক্সেসিবিলিটি কেবল একটি নিয়ম মেনে চলার বিষয় নয়; এটি অন্তর্ভুক্তিমূলক ডিজাইনের একটি মৌলিক নীতি। আপনার ওয়েবসাইট অ্যাক্সেসযোগ্য করে তোলার মাধ্যমে, আপনি প্রতিবন্ধী ব্যক্তি, সহায়ক প্রযুক্তি ব্যবহারকারী এবং বিভিন্ন ডিভাইস ও নেটওয়ার্ক গতিতে আপনার সাইট অ্যাক্সেস করা ব্যক্তিদের সহ একটি বৃহত্তর দর্শকের জন্য এটি উন্মুক্ত করছেন। অ্যাক্সেসযোগ্য নেভিগেশন প্রত্যেকের জন্যই উপকারী, যা সামগ্রিক ব্যবহারযোগ্যতা এবং সার্চ ইঞ্জিন অপ্টিমাইজেশান (SEO) উন্নত করে।

অ্যাক্সেসযোগ্য নেভিগেশন ডিজাইন করার সময় এই পরিস্থিতিগুলো বিবেচনা করুন:

• স্ক্রিন রিডার ব্যবহারকারী: দৃষ্টি প্রতিবন্ধী ব্যক্তিরা ওয়েব নেভিগেট করার জন্য স্ক্রিন রিডারের উপর নির্ভর করেন। সঠিকভাবে গঠিত এবং লেবেলযুক্ত মেনু এই ব্যবহারকারীদের জন্য সাইটের গঠন বুঝতে এবং পছন্দসই কন্টেন্ট খুঁজে পেতে অত্যন্ত গুরুত্বপূর্ণ।
• কীবোর্ড ব্যবহারকারী: মোটর প্রতিবন্ধীসহ অনেক ব্যবহারকারী কীবোর্ড ব্যবহার করে ওয়েবসাইট নেভিগেট করেন। মেনুগুলি অবশ্যই ট্যাব কী এবং অন্যান্য কীবোর্ড শর্টকাট ব্যবহার করে নেভিগেটযোগ্য হতে হবে।
• মোবাইল ব্যবহারকারী: ছোট স্ক্রিনে ড্রপডাউন এবং মেগা মেনু বিশেষত চ্যালেঞ্জিং হতে পারে। প্রতিক্রিয়াশীল ডিজাইন এবং স্পর্শ মিথস্ক্রিয়াগুলির প্রতি যত্নশীল বিবেচনা অপরিহার্য।
• জ্ঞানীয় প্রতিবন্ধী ব্যবহারকারী: স্পষ্ট, সামঞ্জস্যপূর্ণ এবং অনুমানযোগ্য নেভিগেশন জ্ঞানীয় প্রতিবন্ধী ব্যবহারকারীদের জন্য সাইটের কাঠামো বুঝতে এবং বিভ্রান্তি এড়াতে অত্যাবশ্যক।
• কম ব্যান্ডউইথ ব্যবহারকারী: বড় ছবি বা অতিরিক্ত অ্যানিমেশনসহ জটিল মেনু লোড হতে ধীর হতে পারে, যা দুর্বল ইন্টারনেট সংযোগযুক্ত এলাকার ব্যবহারকারীদের হতাশ করে।

ড্রপডাউন এবং মেগা মেনুর জন্য মূল অ্যাক্সেসিবিলিটি নীতি

অ্যাক্সেসযোগ্য মেনু ডিজাইনের ভিত্তি কয়েকটি মূল নীতির উপর নির্ভর করে:

১. সিমেন্টিক HTML কাঠামো

আপনার মেনুর জন্য একটি স্পষ্ট এবং যৌক্তিক কাঠামো তৈরি করতে <nav>, <ul>, এবং <li> এর মতো সিমেন্টিক HTML এলিমেন্ট ব্যবহার করুন। এটি সহায়ক প্রযুক্তিগুলিকে মেনুর উদ্দেশ্য এবং সংগঠন সম্পর্কে মূল্যবান তথ্য প্রদান করে।

উদাহরণ:

<nav aria-label="Main Menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Product Category 1</a></li>
        <li><a href="#">Product Category 2</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

২. ARIA অ্যাট্রিবিউট

ARIA (Accessible Rich Internet Applications) অ্যাট্রিবিউটগুলি ডাইনামিক কন্টেন্ট এবং ইন্টারেক্টিভ এলিমেন্টগুলির অ্যাক্সেসিবিলিটি বাড়ায়। আপনার মেনুর অবস্থা এবং আচরণ সম্পর্কে সহায়ক প্রযুক্তিগুলিকে অতিরিক্ত তথ্য সরবরাহ করতে ARIA অ্যাট্রিবিউট ব্যবহার করুন।

মেনুর জন্য সাধারণ ARIA অ্যাট্রিবিউট:

• aria-haspopup="true": নির্দেশ করে যে একটি এলিমেন্টের একটি পপআপ মেনু বা সাবমেনু আছে।
• aria-expanded="true|false": নির্দেশ করে যে একটি মেনু বা সাবমেনু বর্তমানে প্রসারিত না সংকুচিত। এটি অবশ্যই জাভাস্ক্রিপ্ট দিয়ে গতিশীলভাবে আপডেট করতে হবে।
• aria-label বা aria-labelledby: মেনুর জন্য একটি বর্ণনামূলক লেবেল প্রদান করে, বিশেষ করে যদি ভিজ্যুয়াল লেবেল যথেষ্ট না হয়।
• role="menu", role="menubar", role="menuitem", role="menuitemradio", role="menuitemcheckbox": মেনু কাঠামোর মধ্যে এলিমেন্টের ভূমিকা নির্ধারণ করে।

উদাহরণ:

<button aria-haspopup="true" aria-expanded="false" aria-label="Open Navigation Menu">Menu</button>
<nav aria-label="Main Menu" role="navigation">
  <ul role="menu">
    <li role="menuitem"><a href="#">Home</a></li>
    <li role="menuitem" aria-haspopup="true" aria-expanded="false">
      <a href="#">Products</a>
      <ul role="menu">
        <li role="menuitem"><a href="#">Product Category 1</a></li>
        <li role="menuitem"><a href="#">Product Category 2</a></li>
      </ul>
    </li>
    <<li role="menuitem">a href="#">About Us</a></li>
    <li role="menuitem"><a href="#">Contact</a></li>
  </ul>
</nav>

৩. কীবোর্ড নেভিগেশন

নিশ্চিত করুন যে সমস্ত মেনু আইটেম কীবোর্ড ব্যবহার করে অ্যাক্সেস এবং সক্রিয় করা যায়। ব্যবহারকারীদের ট্যাব কী, অ্যারো কী এবং এন্টার কী ব্যবহার করে মেনুতে নেভিগেট করতে সক্ষম হওয়া উচিত।

কীবোর্ড নেভিগেশনের সেরা অভ্যাস:

• ট্যাব অর্ডার: ট্যাব অর্ডার মেনু আইটেমগুলির যৌক্তিক ভিজ্যুয়াল ক্রম অনুসরণ করা উচিত।
• ফোকাস ইঙ্গিত: বর্তমানে কোন মেনু আইটেমটি নির্বাচিত হয়েছে তা দেখানোর জন্য একটি স্পষ্ট এবং দৃশ্যমান ফোকাস সূচক (যেমন, একটি CSS আউটলাইন) প্রদান করুন।
• অ্যারো কী নেভিগেশন: সাবমেনুর মধ্যে নেভিগেট করতে অ্যারো কী ব্যবহার করুন।
• এন্টার কী অ্যাক্টিভেশন: এন্টার কী বর্তমানে ফোকাস করা মেনু আইটেমটি সক্রিয় করবে।
• এস্কেপ কী ক্লোজার: এস্কেপ কী খোলা সাবমেনুটি বন্ধ করবে।

৪. ফোকাস ম্যানেজমেন্ট

কীবোর্ড ব্যবহারকারীদের জন্য সঠিক ফোকাস ম্যানেজমেন্ট অত্যন্ত গুরুত্বপূর্ণ। যখন একটি সাবমেনু খোলে, তখন ফোকাসটি স্বয়ংক্রিয়ভাবে সাবমেনুর প্রথম আইটেমে স্থানান্তরিত হওয়া উচিত। সাবমেনু বন্ধ হয়ে গেলে, ফোকাসটি মূল মেনু আইটেমে ফিরে আসা উচিত।

৫. রঙের বৈসাদৃশ্য

মেনু টেক্সট এবং ব্যাকগ্রাউন্ডের মধ্যে পর্যাপ্ত রঙের বৈসাদৃশ্য নিশ্চিত করুন। এটি বিশেষ করে স্বল্প দৃষ্টিসম্পন্ন ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ। রঙের বৈসাদৃশ্য অনুপাতের জন্য WCAG (ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি নির্দেশিকা) 2.1 AA মান মেনে চলুন।

৬. প্রতিক্রিয়াশীল ডিজাইন

মেনুগুলি অবশ্যই প্রতিক্রিয়াশীল হতে হবে এবং বিভিন্ন স্ক্রিন আকারের সাথে খাপ খাইয়ে নিতে হবে। ছোট স্ক্রিনে "হ্যামবার্গার" মেনু বা অন্যান্য মোবাইল-বান্ধব নেভিগেশন প্যাটার্ন ব্যবহার করার কথা বিবেচনা করুন। বিভিন্ন ডিভাইস এবং স্ক্রিন রেজোলিউশনে আপনার মেনু পরীক্ষা করুন।

৭. স্পষ্ট এবং সংক্ষিপ্ত লেবেল

সমস্ত মেনু আইটেমগুলির জন্য স্পষ্ট এবং সংক্ষিপ্ত লেবেল ব্যবহার করুন। জারগন বা অস্পষ্ট ভাষা এড়িয়ে চলুন যা ব্যবহারকারীদের জন্য বিভ্রান্তিকর হতে পারে। বহুভাষিক দর্শকদের জন্য অনুবাদের কথা বিবেচনা করুন।

৮. শুধুমাত্র হোভার স্টেট ব্যবহার এড়িয়ে চলুন

সাবমেনু প্রকাশ করার জন্য শুধুমাত্র হোভার স্টেটের উপর নির্ভর করা কীবোর্ড ব্যবহারকারী এবং টাচ ডিভাইসের ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্য নয়। নিশ্চিত করুন যে মেনুগুলি কীবোর্ড ইন্টারঅ্যাকশন এবং টাচ অঙ্গভঙ্গি ব্যবহার করে প্রসারিত এবং সংকুচিত করা যায়।

অ্যাক্সেসযোগ্য ড্রপডাউন মেনু প্রয়োগ করা

ড্রপডাউন মেনু নেভিগেশন সংগঠিত করার একটি সাধারণ উপায়, বিশেষ করে যখন একটি মাঝারি সংখ্যক মেনু আইটেম নিয়ে কাজ করা হয়। এখানে অ্যাক্সেসযোগ্য ড্রপডাউন মেনু কীভাবে প্রয়োগ করবেন তা আলোচনা করা হলো:

1. HTML কাঠামো: ড্রপডাউন হায়ারার্কি তৈরি করতে <li> এলিমেন্টের মধ্যে একটি নেস্টেড <ul> কাঠামো ব্যবহার করুন।
2. ARIA অ্যাট্রিবিউট: ড্রপডাউন ট্রিগারকারী মূল মেনু আইটেমে aria-haspopup="true" যোগ করুন। ড্রপডাউন খোলা থাকলে aria-expanded="true" এবং বন্ধ থাকলে aria-expanded="false" ব্যবহার করুন।
3. কীবোর্ড নেভিগেশন: নিশ্চিত করুন যে ব্যবহারকারীরা ট্যাব এবং অ্যারো কী ব্যবহার করে ড্রপডাউন আইটেমগুলির মাধ্যমে নেভিগেট করতে পারে।
4. ফোকাস ম্যানেজমেন্ট: যখন ড্রপডাউন খোলে, তখন ড্রপডাউনের প্রথম আইটেমে ফোকাস সেট করুন। যখন এটি বন্ধ হয়, তখন মূল মেনু আইটেমে ফোকাস ফিরিয়ে দিন।
5. CSS স্টাইলিং: স্ক্রিন রিডারদের জন্য এর অ্যাক্সেসিবিলিটি বজায় রেখে ড্রপডাউন কন্টেন্টটি দৃশ্যমানভাবে লুকাতে এবং দেখাতে CSS ব্যবহার করুন।

ড্রপডাউন কার্যকারিতার জন্য উদাহরণ জাভাস্ক্রিপ্ট:

const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach(dropdown => {
  const button = dropdown.querySelector('button[aria-haspopup="true"]');
  const menu = dropdown.querySelector('.dropdown-menu');

  button.addEventListener('click', () => {
    const isExpanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !isExpanded);
    menu.classList.toggle('show');
  });
});

অ্যাক্সেসযোগ্য মেগা মেনু প্রয়োগ করা

মেগা মেনু হল বড়, বহু-কলামের মেনু যা ছবি, টেক্সট এবং লিঙ্কসহ উল্লেখযোগ্য পরিমাণে কন্টেন্ট প্রদর্শন করতে পারে। যদিও এগুলি দৃশ্যত আকর্ষণীয় এবং তথ্যপূর্ণ হতে পারে, তবে এগুলি আরও বড় অ্যাক্সেসিবিলিটি চ্যালেঞ্জও তৈরি করে।

1. HTML কাঠামো: মেগা মেনুর মধ্যে কন্টেন্টকে হেডিং, তালিকা এবং অনুচ্ছেদের মতো সিমেন্টিক HTML এলিমেন্ট ব্যবহার করে সংগঠিত করুন।
2. ARIA অ্যাট্রিবিউট: মেগা মেনুর মধ্যে বিভিন্ন বিভাগের ভূমিকা নির্ধারণ করতে এবং ট্রিগার এলিমেন্ট ও মেগা মেনু কন্টেন্টের মধ্যে সম্পর্ক নির্দেশ করতে ARIA অ্যাট্রিবিউট ব্যবহার করুন।
3. কীবোর্ড নেভিগেশন: একটি স্পষ্ট এবং যৌক্তিক কীবোর্ড নেভিগেশন সিস্টেম প্রয়োগ করুন, নিশ্চিত করুন যে ব্যবহারকারীরা মেগা মেনুর সমস্ত বিভাগের মাধ্যমে সহজেই নেভিগেট করতে পারে।
4. ফোকাস ম্যানেজমেন্ট: ফোকাস ম্যানেজমেন্টের দিকে গভীর মনোযোগ দিন, নিশ্চিত করুন যে ফোকাস সর্বদা একটি যৌক্তিক এবং অনুমানযোগ্য স্থানে থাকে।
5. প্রতিক্রিয়াশীল ডিজাইন: ছোট স্ক্রিনে ভালোভাবে কাজ করার জন্য মেগা মেনুগুলির প্রায়শই উল্লেখযোগ্য সমন্বয়ের প্রয়োজন হয়। একটি পূর্ণ-স্ক্রীন ওভারলে বা অন্যান্য মোবাইল-বান্ধব ডিজাইন প্যাটার্ন ব্যবহার করার কথা বিবেচনা করুন।
6. অতিরিক্ত কন্টেন্ট এড়িয়ে চলুন: যদিও মেগা মেনুগুলি অনেক তথ্য প্রদর্শনের জন্য ডিজাইন করা হয়েছে, তবে সেগুলিকে খুব বেশি কন্টেন্ট দিয়ে ওভারলোড করা এড়িয়ে চলুন, যা ব্যবহারকারীদের জন্য অপ্রতিরোধ্য হতে পারে।

উদাহরণ: একটি আন্তর্জাতিক ই-কমার্স স্টোরের জন্য একটি মেগা মেনু:

একটি অনলাইন খুচরা বিক্রেতার কথা ভাবুন যা বিশ্বব্যাপী পণ্য বিক্রি করে। তাদের মেগা মেনুতে থাকতে পারে:

• অঞ্চল অনুসারে বিভাগ: "ইউরোপে কেনাকাটা করুন," "এশিয়ায় কেনাকাটা করুন," "উত্তর আমেরিকায় কেনাকাটা করুন" প্রতিটি সেই অঞ্চলের জনপ্রিয় পণ্যগুলি দেখানোর জন্য প্রসারিত হয়।
• মুদ্রার বিকল্প: পছন্দের মুদ্রা (USD, EUR, JPY, ইত্যাদি) নির্বাচন করার জন্য একটি স্পষ্টভাবে দৃশ্যমান বিভাগ।
• ভাষা নির্বাচন: ওয়েবসাইটের অনূদিত সংস্করণগুলিতে লিঙ্ক (ইংরেজি, স্প্যানিশ, ফরাসি, চীনা, ইত্যাদি)।
• সহায়তা ও সমর্থন: গ্রাহক পরিষেবা, প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী এবং আন্তর্জাতিক শিপিং তথ্যের সরাসরি লিঙ্ক।

পরীক্ষা এবং যাচাইকরণ

আপনার মেনুর অ্যাক্সেসিবিলিটি নিশ্চিত করার জন্য পুঙ্খানুপুঙ্খ পরীক্ষা অপরিহার্য। স্বয়ংক্রিয় পরীক্ষার সরঞ্জাম এবং ম্যানুয়াল পরীক্ষার কৌশলগুলির সংমিশ্রণ ব্যবহার করুন।

পরীক্ষার সরঞ্জাম:

• WAVE (Web Accessibility Evaluation Tool): একটি ব্রাউজার এক্সটেনশন যা অ্যাক্সেসিবিলিটি ত্রুটি সনাক্ত করে এবং উন্নতির জন্য পরামর্শ প্রদান করে।
• axe DevTools: ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশনগুলির জন্য একটি স্বয়ংক্রিয় অ্যাক্সেসিবিলিটি পরীক্ষার সরঞ্জাম।
• স্ক্রিন রিডার পরীক্ষা: NVDA, JAWS এবং VoiceOver এর মতো জনপ্রিয় স্ক্রিন রিডার দিয়ে আপনার মেনু পরীক্ষা করুন।

ম্যানুয়াল পরীক্ষা:

• কীবোর্ড নেভিগেশন পরীক্ষা: সমস্ত এলিমেন্ট অ্যাক্সেসযোগ্য এবং ফোকাস সঠিকভাবে পরিচালিত হচ্ছে কিনা তা নিশ্চিত করতে কীবোর্ড ব্যবহার করে আপনার মেনুগুলির মাধ্যমে নেভিগেট করুন।
• রঙের বৈসাদৃশ্য পরীক্ষা: রঙের বৈসাদৃশ্য অনুপাত WCAG নির্দেশিকা পূরণ করে কিনা তা যাচাই করতে একটি রঙ বৈসাদৃশ্য বিশ্লেষক ব্যবহার করুন।
• ব্যবহারকারী পরীক্ষা: আপনার মেনুগুলির ব্যবহারযোগ্যতা এবং অ্যাক্সেসিবিলিটি সম্পর্কে মূল্যবান প্রতিক্রিয়া পেতে আপনার পরীক্ষা প্রক্রিয়ায় প্রতিবন্ধী ব্যবহারকারীদের অন্তর্ভুক্ত করুন।

বিশ্বব্যাপী অ্যাক্সেসিবিলিটির জন্য সেরা অভ্যাস

বিশ্বব্যাপী দর্শকদের জন্য মেনু ডিজাইন করার সময়, এই অতিরিক্ত সেরা অভ্যাসগুলি বিবেচনা করুন:

• ভাষা সমর্থন: নিশ্চিত করুন যে আপনার মেনুগুলি একাধিক ভাষায় অনূদিত হয়েছে এবং ভাষা নির্বাচন সহজেই অ্যাক্সেসযোগ্য।
• তারিখ এবং সময়ের ফর্ম্যাট: বিভ্রান্তি এড়াতে আন্তর্জাতিক তারিখ এবং সময়ের ফর্ম্যাট (যেমন, ISO 8601) ব্যবহার করুন।
• মুদ্রা রূপান্তর: স্পষ্ট মুদ্রা রূপান্তর বিকল্প সরবরাহ করুন এবং স্থানীয় মুদ্রায় দাম প্রদর্শন করুন।
• শিপিং তথ্য: বিভিন্ন অঞ্চল এবং দেশের জন্য বিস্তারিত শিপিং তথ্য সরবরাহ করুন।
• সাংস্কৃতিক সংবেদনশীলতা: আপনার মেনু ডিজাইন করার সময় সাংস্কৃতিক পার্থক্যের প্রতি মনোযোগী হন। এমন ছবি বা প্রতীক ব্যবহার করা এড়িয়ে চলুন যা নির্দিষ্ট সংস্কৃতিতে আপত্তিকর বা অনুপযুক্ত হতে পারে।
• দিকনির্দেশনা: বাম-থেকে-ডান (LTR) এবং ডান-থেকে-বাম (RTL) উভয় ভাষাকেই সমর্থন করুন।

উপসংহার

অ্যাক্সেসযোগ্য ড্রপডাউন এবং মেগা মেনু তৈরি করার জন্য সতর্ক পরিকল্পনা এবং বিশদের প্রতি মনোযোগ প্রয়োজন। এই নির্দেশিকায় বর্ণিত নীতি এবং সেরা অভ্যাসগুলি অনুসরণ করে, আপনি নিশ্চিত করতে পারেন যে আপনার ওয়েবসাইট সকলের দ্বারা, তাদের ক্ষমতা বা অবস্থান নির্বিশেষে, নেভিগেটযোগ্য এবং ব্যবহারযোগ্য। মনে রাখবেন যে অ্যাক্সেসিবিলিটি একটি চলমান প্রক্রিয়া, এককালীন সমাধান নয়। আপনার ওয়েবসাইট বিকশিত হওয়ার সাথে সাথে আপনার মেনুগুলি অ্যাক্সেসযোগ্য থাকে তা নিশ্চিত করতে নিয়মিত পরীক্ষা করুন এবং আপডেট করুন।

অ্যাক্সেসিবিলিটিকে অগ্রাধিকার দিয়ে, আপনি কেবল সমস্ত ব্যবহারকারীর জন্য আরও অন্তর্ভুক্তিমূলক অভিজ্ঞতা তৈরি করেন না, বরং আপনি আপনার ওয়েবসাইটের সামগ্রিক ব্যবহারযোগ্যতা এবং SEO উন্নত করেন, যা শেষ পর্যন্ত আপনার ব্যবসা এবং আপনার দর্শকদের উপকার করে।

আরও রিসোর্স

• ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি নির্দেশিকা (WCAG)
• অ্যাক্সেসযোগ্য রিচ ইন্টারনেট অ্যাপ্লিকেশন (ARIA) 1.1
• MDN ওয়েব ডক্স: অ্যাক্সেসিবিলিটি